<template>
    <h1 class="date">{{ formattedDate }}</h1>

</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue'
import dayjs from 'dayjs'
const nowDate: any = dayjs()


let timer: any = null
const formattedDate = ref(nowDate.format('YYYY-MM-DD HH:mm:ss'))
timer = setInterval(() => {
    formattedDate.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}, 1000)


onBeforeUnmount(() => {
    clearInterval(timer)
    timer = null
})
</script>

<style scoped lang="scss">
.date {
    margin: 0;
    font-size: 30px;
    color: var(--themeColor);
    padding: 5px 10px;
    font-weight: bold;
    font-family: 'Digital',
        sans-serif;
    width: fit-content;
    border-radius: 5px;
}
</style>